<template>
  <div id="createSystemInfo">
    <a-form :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
      <a-form-item field="infoTitle" label="Title">
        <a-input v-model="form.infoTitle" placeholder="please enter Title" />
      </a-form-item>
      <a-form-item field="infoText" label="Text">
        <!-- <a-input v-model="form.infoText" placeholder="please enter request infoText" /> -->
        <a-textarea
          placeholder="please enter Text"
          v-model="form.infoText"
          allow-clear
        />
      </a-form-item>

      <a-form-item style="padding-top: 25px">
        <a-button html-type="register">Publish</a-button>
      </a-form-item>
    </a-form>
    {{ form }}
  </div>
</template>
        
        <script>
import { reactive } from "vue";
import axios from "axios";
export default {
  setup() {
    const form = reactive({
      infoTitle: "",
      infoText: "",
    });
    return {
      form,
    };
  },
  methods: {
    handleSubmit() {
      if (this.form.infoTitle == "" || this.form.infoTitle == "") {
        alert("公告标题或内容不能为空");
      } else {
        axios
          .post("/createSystemInfo", {
            infoTitle: this.form.infoTitle,
            infoText: this.form.infoText,
          })
          .then((response) => {
            if (response.data) {
              alert("发布成功");
            } else {
              alert("发布失败");
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
  },
};
</script>
    
    <style>
#createSystemInfo {
  padding-top: 100px;
  padding-left: 400px;
}
#createSystemInfo .select {
  padding-left: 0px;
}
</style>